<template>
     <a-modal
      title="新增"
      :width=800
      :maskClosable=false
      v-model="visible"
      @ok="handleOk"
    >

      <a-form :form="form">
          <a-form-item
            label="用户"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'username',
                {initialValue:sysUser.username,rules: [{ required: true, message: '请输入用户名' }]}
              ]"
              placeholder="输入用户名" />
          </a-form-item>

         <a-form-item
            label="密码"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              type="password"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }]}
              ]"
              placeholder="请输入密码" />
          </a-form-item>

          <a-form-item
            label="手机号"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'mobile',
                {initialValue:sysUser.mobile,rules: [{ required: true, message: '请输入手机号' }]}
              ]"
              placeholder="输入手机号" />
          </a-form-item>

          <a-form-item
            label="email"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'email',
                {initialValue:sysUser.email,rules: [{ required: true, message: '请输入email' }]}
              ]"
              placeholder="输入email" />
          </a-form-item>


        <a-form-item
            label="角色"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-checkbox-group  :options="roleList" :value="userRoleList"  @change="onChange">
              
            </a-checkbox-group>

        </a-form-item>  

      </a-form>

    </a-modal>

</template>
<script>
import md5 from 'md5'
import { saveUser, roleListAll, getUserRoleList } from '@/api/sys'

export default {
  name: 'SysUserModal',
  data() {
    return {
      visible: false,
      sysUser: {},
      form: this.$form.createForm(this),
      roleList: [],
      userRoleList: []
    }
  },
  methods: {
    handleEdit(record) {
      this.form.resetFields()
      this.sysUser = Object.assign({}, record)
      this.loadUserList(record)
    },
    handleCreate() {
      this.sysUser = {}
      this.userRoleList = []
      this.form.resetFields()
      this.loadRoleList()
    },

    // handler
    handleOk() {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
          const params = { ...values }
          params.id = this.sysUser.id
          params.roleIds = this.userRoleList
          params.password = md5(params.password)
          console.log(params)
          saveUser(params).then(res => {
            if (res.status == 0) {
              _this.$message.success('保存成功')
              this.visible = false
              _this.$emit('ok')
            } else {
              _this.$message.success(res.msg)
            }
          })
        }
      })
    },
    loadRoleList() {
      roleListAll().then(res => {
        const roleList = []
        res.data.forEach(item => {
          roleList.push({ label: item.roleName, value: item.id })
        })
        this.roleList = roleList
        this.visible = true
      })
    },
    loadUserList(sysUser) {
      getUserRoleList(sysUser).then(res => {
        const userRoleList = []
        res.data.forEach(item => {
          userRoleList.push(item.roleId)
        })
        this.userRoleList = userRoleList
        this.loadRoleList()
      })
    },
    onChange(checkedList) {
      console.log('checkedList:{}', checkedList)
      this.userRoleList = checkedList
    }
  },
  created() {},
  watch: {}
}
</script>
